<%@ page contentType="text/html; charset=utf-8" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" %>
<%@ taglib prefix="spring" uri="http://www.springframework.org/tags" %>
<%@ taglib prefix="sec" uri="http://www.springframework.org/security/tags" %>
<%@ taglib prefix="primus" tagdir="/WEB-INF/tags" %>
<%@ taglib prefix="fn" tagdir="/WEB-INF/tags/form" %>
<primus:page title="改派订单列表">
    <jsp:attribute name="css">
        <style type="text/css">
            #table .operate {
                min-width: 80px;
            }
        </style>
    </jsp:attribute>
    <jsp:attribute name="script">
        <script type="application/javascript">
            $(function () {
                $("#table").DataTable({
                    "lengthMenu": [[10, 20, 50, -1], [10, 20, 50, "所有"]],
                    "columnDefs": [{"targets": [7], "orderable": false}],
                    "searching": false,
                    "order": [[0, "asc"]]
                });
            });
            $("body").on("click", ".geo-line", function () {
                var id = $(this).data("id");
            })
        </script>
    </jsp:attribute>
    <jsp:body>
        <div class="breadcrumbs ace-save-state" id="breadcrumbs">
            <ul class="breadcrumb">
                <li>
                    <i class="ace-icon fa fa-home home-icon"></i>
                    <a href="welcome.do">
                        首页
                    </a>
                </li>
                <li>
                    <a href="geo/provinces">
                        订单管理
                    </a>
                </li>
                <li class="active">
                    改派订单列表
                </li>
            </ul>
        </div>

        <div class="page-content">

            <div class="row">
                <div class="col-xs-12">
                    <!-- PAGE CONTENT BEGINS -->
                    <div class="row">
                        <div class="col-xs-12">
                            <h3 class="header smaller lighter blue">
                                改派订单列表
                            </h3>
                            <div class="row">
                                <div style="float:right">
                                    <button class="btn btn-white btn-default btn-round backButton">
                                        <i class="ace-icon fa fa-reply icon-only" style="padding:0;margin:0;float:left;box-sizing:border-box;"></i>
                                        返回
                                    </button>
                                    <button class="btn btn-white btn-default btn-round" id="closeButton">
                                        <i class="ace-icon fa fa-times red2" style="padding:0;margin:0;float:left;box-sizing:border-box;"></i>
                                        关闭
                                    </button>
                                </div>
                                <h4 class="header smaller lighter blue">
                                    修改收货信息
                                </h4>
                                <div class="row read">
                                    <div class="col-sm-4">
                                        <label class="col-sm-4 control-label no-padding-right">收货人姓名</label>
                                        <input type="text" class="col-xs-6 col-sm-6 con_inf_name read" />
                                    </div>
                                    <div class="col-sm-4">
                                        <label class="col-sm-4 control-label no-padding-right" >收货人固定电话</label>
                                        <input type="text" class="col-xs-6 col-sm-6 con_inf_tel read" />
                                    </div>
                                </div>
                                <br>
                                <br>
                                <div class="row read">
                                    <div style="width: 100%">
                                        <div class="col-sm-2">
                                            <label class="col-sm-2 control-label no-padding-right" >省</label>
                                            <select class="form-control read" id="form-field-select-1">
                                                <option value="0">请选择</option>
                                            </select>
                                        </div>
                                        <div class="col-sm-2">
                                            <label class="col-sm-2 control-label no-padding-right" >市</label>
                                            <select class="form-control read" id="form-field-select-2">
                                                <option value="0">请选择</option>
                                            </select>
                                        </div>
                                        <div class="col-sm-2">
                                            <label class="col-sm-2 control-label no-padding-right" >区</label>
                                            <select class="form-control read" id="form-field-select-3">
                                                <option value="0">请选择</option>
                                            </select>
                                        </div>
                                    </div>
                                </div>
                                <br>
                                <br>
                                <div class="row">
                                    <div class="col-sm-5">
                                        <label class="col-sm-4 control-label no-padding-right" >详细地址</label>
                                        <input type="text" class="col-xs-8 col-sm-8 read" placeholder="请输入详细地址" id="form-field-select-text" />
                                    </div>
                                </div>
                                <br>
                                <br>
                                <div class="row">
                                    <button class="btn btn-danger btn-block read" id="saveButton">保存收货信息</button>
                                </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        </div>

        <script>
            var row,    // 详情数据
                index,  // 行索引
                judge = 1;  // 更改行(判断是否可以操作)

            $(function(){

                GetRequest();

                //'省'层级数据
                $.ajax({
                    url:"/dispatch/level2",
                    dataType:"JSON",
                    data:{
                        "level" : 0
                    },
                    success: function (resut) {
                        $("#form-field-select-1").empty();          //内容清空
                        $("#form-field-select-1").append("<option value='0'>请选择</option>"); //为Select追加一个Option(下拉项)
                        for (var i = 0; i < resut.length; i++) {
                            $("#form-field-select-1").append("<option value="+resut[i].id+">"+resut[i].name+"</option>");
                        }
                    }
                });

            });

            // 返回按钮(跳转回详情页面)
            $(".backButton").on("click", function () {
                window.location.href="/dispatch/details";   //跳转派单页面
            });

            // 关闭按钮(跳转派单列表页面)
            $("#closeButton").on("click", function () {
                window.location.href="/dispatch.do";
            });

            // 获取session 存储的值
            function GetRequest() {
                var vc = sessionStorage.getItem('sendOperation'); // => 返回testKey对应的值
                if (vc != null) {
                    row = JSON.parse(vc)
                    console.log(vc);
                    con_inf_value(row.consignee);
                }
            }

            // 收货人信息赋值
            function con_inf_value(consignee) {
                if (consignee != null) {
                    $(".con_inf_name").val(consignee.consigneeName);
                    $(".con_inf_tel").val(consignee.consigneeMobile);
                }
            }

            // '市'下拉框(点击)
            $("#form-field-select-2").on("click", function () {
                if (0 == $("#form-field-select-1").val()) {
                    layer.msg("对不起,请先选择'省'")
                }
            });

            // '县/区'下拉框(点击)
            $("#form-field-select-3").on("click", function () {
                if (0 == $("#form-field-select-2").val()) {
                    layer.msg("对不起,请先选择'市'")
                }
            });

            // '省'下拉框(改变)
            $("#form-field-select-1").on("change", function () {
                $.ajax({
                    url:"/dispatch/level2",
                    dataType:"JSON",
                    data:{
                        "level" : 1,
                        "code" : $("#form-field-select-1").val()
                    },
                    success: function (resut) {
                        $("#form-field-select-2").empty();          //内容清空
                        $("#form-field-select-2").append("<option value='0'>请选择</option>"); //为Select追加一个Option(下拉项)
                        for (var i = 0; i < resut.length; i++) {
                            $("#form-field-select-2").append("<option value="+resut[i].id+">"+resut[i].name+"</option>");
                        }
                    }
                });
            });

            // '市'下拉框(改变)
            $("#form-field-select-2").on("change", function () {
                $.ajax({
                    url:"/dispatch/level2",
                    dataType:"JSON",
                    data:{
                        "level" : 2,
                        "code" : $("#form-field-select-2").val()
                    },
                    success: function (resut) {
                        $("#form-field-select-3").empty();          //内容清空
                        $("#form-field-select-3").append("<option value='0'>请选择</option>"); //为Select追加一个Option(下拉项)
                        for (var i = 0; i < resut.length; i++) {
                            $("#form-field-select-3").append("<option value="+resut[i].id+">"+resut[i].name+"</option>");
                        }
                    }
                });
            });

            // 保存按钮
            $("#saveButton").on("click", function () {
                var code = sessionStorage.getItem('dispatchCode'); //订单编码
                $.ajax({
                    url:"/dispatch/changeConsigneeInfo",
                    type:"POST",
                    data:{
                        "code" : code,                                      //订单编码
                        "consigneeName" : $(".con_inf_name").val(),         //收货人名字
                        "consigneeMobile" : $(".con_inf_tel").val(),        //收货人电话
                        "provinceId" : $("#form-field-select-1").val(),     //省id
                        "cityId" : $("#form-field-select-2").val(),         //市id
                        "districtId" : $("#form-field-select-3").val(),     //区id
                        "provinceText" : $("#form-field-select-1").find("option:selected").text(),  //省名字
                        "cityText" : $("#form-field-select-2").find("option:selected").text(),      //市名字
                        "districtText" : $("#form-field-select-3").find("option:selected").text(),  //区名字
                        "address" : $("#form-field-select-text").text(),    //详细地址
                    },
                    success: function (resut) {
                        window.location.href="/dispatch/modifyTheReceiving";
                    }
                });
            })

            //验证(收货人名字)
            $(".con_inf_name").on("blur", function(){
                if ($(".con_inf_name").val().length > 20) {
                    layer.msg("'收货人姓名'长度不可超过20");
                    $(".con_inf_name").val("");
                }
            });

            //验证(收货人电话)
            $(".con_inf_tel").on("blur", function(){
                if ($(".con_inf_tel").val().length > 20) {
                    layer.msg("'收货人电话'长度不可超过20");
                    $(".con_inf_tel").val("");
                    return;
                } else {
                    var reg = /^[0-9]*$/;
                    if (!reg.test($(".con_inf_tel").val())) {
                        layer.msg("'收货人电话'只能由数字组成");
                        $(".con_inf_tel").val("");
                        return ;
                    }
                }
            });

            //验证(详细地址)
            $("#form-field-select-text").on("blur", function(){
                if ($("#form-field-select-text").val().length > 100) {
                    layer.msg("'详细地址'长度不可超过100");
                    $("#form-field-select-text").val("");
                }
            });


        </script>
    </jsp:body>
</primus:page>